<!DOCTYPE html>
<html>
<head>
<title>文件上传手动提交</title>

<meta name="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
	src="uploadify/js/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="uploadify/css/uploadify.css" />
</head>

<body>

	<div id="uploadify-queue"></div>
	<div id="mypic">
		<input type="file" name="pic" id="pic">
	</div>
	<div id="showImg"></div>
	<div id="btns">
		<input type="button" id="cancelFirstBtn" value="删除第一个上传文件"> <input
			type="button" id="cancelAllBtn" value="取消上传"> <input
			type="button" id="uploadAllBtn" value="全部上传"> <input
			type="button" id="uploadFirst" value="只上传第一个">

	</div>
	<script type="text/javascript">
	
		// 动态创建Form表单
		$(function() {
	
			$("#mypic").uploadify({
				// 				onInit: function () {                        //载入时触发，将flash设置到最小
				//                				$("#mypic-queue").hide();
				//                  },
				auto : false, // 禁止自动提交
				swf : "uploadify/swf/uploadify.swf",
				uploader : "uploadServlet",
				buttonText : "请选择文件",
				fileObject : "pic",
				multi : true,
				fileTypeExts : "*.jpg;*.png;*.gif;*.bmp", // 只能上传图片
				//  上传成功
				onUploadSuccess : function(file, data) {
	
					var _data = eval("(" + data + ")");
					if (_data.saved) {
						var path = "<img src='upload/" + _data.fileName + "' style='width:20%'>";
						$("#showImg").append(path);
					} else {
						alert("文件上传失败");
					}
	
				},
			});
			// 直接在外面绑定事件
			$("#cancelFirstBtn").on("click", function() {
					$("#mypic").uploadify("cancel");
			});
			$("#cancelAllBtn").on("click", function() {
					$("#mypic").uploadify("cancel","*");
			});
			$("#uploadAllBtn").on("click", function() {
					$("#mypic").uploadify("upload","*");
			});
			$("#uploadFirst").on("click", function() {
				$("#mypic").uploadify("upload");
			});
	
		});
	</script>
</body>
</html>
